<template>
    <div>
        <Card v-if="id" :bordered="false" style="min-width: 983px">
            <p slot="title">执行中的动作</p>
            <Row>
                <Col :span="6">
                <Steps :current="active_action" direction="vertical">
                    <Step v-for="(item,index) in action_detail" :title="item.name"
                          :content="'开始时间'+item.start_datetime"
                    >
                    </Step>
                </Steps>
                </Col>
                <Col :span="18">
                <div style="position: relative">
                    <img src="./img/地图背景.png" alt="" style="width: 100%;">
                    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
                        <!--水泵-->
                        <img src="./img/水泵罐.png" alt="" style="position: absolute;right: 5%;height: 44.8%;top: 19%;">
                        <img src="./img/水泵.png" alt="" style="position: absolute;right: 6.4%;top: 52.4%;width: 3%;">
                        <img src="./img/圆.png" alt="" style="position: absolute;right: 5.6%;top: 50.7%;width: 4.2%;">
                        <!--N-->
                        <img src="./img/肥料罐.gif" v-if="switchN" alt="" style="position: absolute;right: 24.1%;width: 3.5%;top: 19%;">
                        <div v-if="switchN" style="position: absolute;right: 24.1%;width: 3.5%;top: 22.4%;text-align: center; font-weight: 500;font-size: 16px;color: #FFF">
                            N


                        </div>
                        <!--P-->
                        <img src="./img/肥料罐.gif" v-if="switchP" alt="" style="position: absolute;right: 20.1%;width: 3.5%;top: 19%;">
                        <div v-if="switchP" style="position: absolute;right: 20.1%;width: 3.5%;top: 22.4%;text-align: center; font-weight: 500;font-size: 16px;color: #FFF">
                            P


                        </div>
                        <!--K-->
                        <img src="./img/肥料罐.gif" v-if="switchK" alt="" style="position: absolute;right: 15.8%;width: 3.5%;top: 19%;">
                        <div v-if="switchK" style="position: absolute;right: 15.8%;width: 3.5%;top: 22.4%;text-align: center; font-weight: 500;font-size: 16px;color: #FFF">
                            K


                        </div>
                        <!--X-->
                        <img src="./img/肥料罐.gif" v-if="switchX " alt="" style="position: absolute;right: 11.7%;width: 3.5%;top: 19%;">
                        <div v-if="switchX" style="position: absolute;right: 11.7%;width: 3.5%;top: 22.4%;text-align: center; font-weight: 500;font-size: 16px;color: #FFF">
                            X


                        </div>
                        <!--混合肥-->
                        <img src="./img/混合肥罐.gif" v-if="showMixFertJug" alt="" style="position: absolute;right: 11.8%;width: 16%;top: 48%;">
                        <!--供水供肥-->
                        <!--<img src="./img/供水供肥.gif" v-if="switchMain" alt="" style="position: absolute;right: 7.25%;top: 61.6%;width: 26%;">-->
                        <!--水泵管道-->
                        <img src="./img/waterpiprun.gif" v-if="switchWater" style="position: absolute;right: 7.25%;top: 61.6%;width: 26%;"/>
                        <img src="./img/fertpiprun.gif" v-if="switchMixFert" style="position: absolute;right: 7.25%;top: 61.6%;width: 26%;"/>
                        <img src="./img/mainpiprun.gif" v-if="switchMain" style="position: absolute;right: 7.25%;top: 61.6%;width: 26%;"/>

                        <!--阀门/田边-->
                        <img src="./img/阀门红y.png" alt="" style="position: absolute;right: 29.5%;top: 78.6%;width: 3%;">
                        <img src="./img/阀门绿y.png" v-if="switchMain" alt=""
                             style="position: absolute;right: 29.5%;top: 78.6%;width: 3%;">
                        <!--水泵管-->
                        <img src="./img/阀门红x.png" alt="" style="position: absolute;right: 6.3%;top: 65%;width: 3%;">
                        <img src="./img/阀门绿x.png" v-if="switchWater" alt=""
                             style="position: absolute;right: 6.3%;top: 65%;width: 3%;">
                        <!--混合肥管-->
                        <img src="./img/阀门红x.png"  alt="" style="position: absolute;right: 18%;top: 65%;width: 3%;">
                        <img src="./img/阀门绿x.png"  alt="" style="position: absolute;right: 18%;top: 65%;width: 3%;" v-show="switchMixFert">
                        <!--N管-->
                        <img src="./img/阀门红x.png" alt="" style="position: absolute;right: 24.9%;top: 37.8%;width: 2%;">
                        <img src="./img/阀门绿x.png" v-if="switchN" alt=""
                             style="position: absolute;right: 24.9%;top: 37.8%;width: 2%;">
                        <!--P管-->
                        <img src="./img/阀门红x.png" alt="" style="position: absolute;right: 20.8%;top: 37.8%;width: 2%;">
                        <img src="./img/阀门绿x.png" v-if="switchP" alt=""
                             style="position: absolute;right: 20.8%;top: 37.8%;width: 2%;">
                        <!--K管-->
                        <img src="./img/阀门红x.png" alt="" style="position: absolute;right: 16.4%;top: 37.8%;width: 2%;">
                        <img src="./img/阀门绿x.png" v-if="switchK" alt=""
                             style="position: absolute;right: 16.4%;top: 37.8%;width: 2%;">
                        <!--X管-->
                        <img src="./img/阀门红x.png" alt="" style="position: absolute;right: 12.23%;top: 37.8%;width: 2%;">
                        <img src="./img/阀门绿x.png" v-if="switchX" alt=""
                             style="position: absolute;right: 12.23%;top: 37.8%;width: 2%;">
                    </div>
                </div>
                </Col>
            </Row>
        </Card>
        <br>
        <Card :bordered="false" style="min-width: 983px">
            <p slot="title">任务列表</p>
            <Select v-model="id" clearable style="width:200px;margin-bottom: 20px;" @on-change="setTaskDetail">
                <Option v-for="item in allData" :value="item.id" :key="item.value">{{ item.name }}</Option>
            </Select>
            <Button style="float: right" @click="isShowModal=true">添加即时任务</Button>
            <div v-if="id">
                <div class="flex">
                    <p>任务状态: {{data[0].status}}</p>
                    <p>任务: {{data[0].name}}</p>
                    <p>所在地块: {{data[0].afarm_block}}</p>
                </div>
                <div class="flex">
                    <p>开始时间: {{data[0].start_date}}</p>
                    <p>作物名称: {{data[0].crop_name}}</p>
                </div>
                <div class="flex">
                    <p>水量(m^3): {{data[0].water_amount}}</p>
                    <p>肥料N用量(公斤): {{data[0].N}}</p>
                    <p>肥料P用量(公斤): {{data[0].P}}</p>
                    <p>肥料K用量(公斤): {{data[0].K}}</p>
                    <p>有机肥(公斤): {{data[0].organic_fert}}</p>
                </div>
            </div>
            <Table stripe border :columns="columnsList" :data="task_detail"></Table>
        </Card>

        <Modal
                v-model="isShowModal"
                @on-ok="modalOk"
                @on-cancel="modalCancel"
                title="计划生产任务">
            <Form v-model="formInfo">
                <FormItem label="任务名称" :label-width=100>
                    <Input placeholder="请输入任务名称" v-model="formInfo.name"></Input>
                </FormItem>

                <FormItem label="任务介绍" :label-width=100>
                    <Input placeholder="请输入任务介绍" v-model="formInfo.intro"></Input>
                </FormItem>

                <FormItem label="计划启动时间" :label-width=100>
                    <DatePicker format="yyyy-MM-dd" type="date" placeholder="请选择任务起始时间"
                                v-model="formInfo.planedStartTime"></DatePicker>
                </FormItem>

                <FormItem label="N(公斤)" :label-width=100>
                    <Input placeholder="请输入N肥量" v-model="formInfo.fertN" style="width: 100px"/>
                    <span style="margin-left: 60px"> P(公斤) </span>
                    <Input placeholder="请输入P肥量" v-model="formInfo.fertP"
                           style="width: 100px"/>
                </FormItem>

                <FormItem label="K(公斤)" :label-width=100>
                    <Input placeholder="请输入K肥量" v-model="formInfo.fertK" style="width: 100px"/>
                    <span style="margin-left: 30px">有机肥(公斤) </span>
                    <Input placeholder="请输入有机肥量" v-model="formInfo.fertOrganic" style="width: 100px"/>
                </FormItem>

                <FormItem label="灌水(m³)" :label-width=100>
                    <Input placeholder="请输入灌水量" v-model="formInfo.watering" style="width: 100px;"/>
                </FormItem>

                <FormItem label="状态" :label-width=100>
                    <Select v-model="formInfo.status" placement="bottom" style="width: 200px;">
                        <Option v-for="item in statusDatas" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>

    </div>
</template>
<style scoped>
    .flex {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .flex p {
        margin-right: 40px;
    }
</style>
<script>
    export default {
        data() {
            return {
                switchN: false,
                switchP: false,
                switchK: false,
                switchX: false,
                switchMixFert: false,
                switchWater: false,
                switchMain: false,
                showMixFertJug:false,
                active_action: -1, // 正在执行中的任务动作下标
                action_detail: [
                    {
                        name: '开始混肥、灌水',
                        start_datetime: '00:00',

                    },
                    {
                        name: '停止混磷、钾肥',
                        start_datetime: '00:05'
                    },
                    {
                        name: '停止混氮肥',
                        start_datetime: '00:20'
                    },
                    {
                        name: '开始滴肥',
                        start_datetime: '00:30'
                    },
                    {
                        name: '停止施肥',
                        start_datetime: '00:60'
                    },
                    {
                        name: '停止灌水',
                        start_datetime: '00:80'
                    }
                ], // 正在执行中的任务动作
                task_detail: [], // 当前所有任务
                columnsList: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '开始时间',
                        align: 'center',
                        key: 'planedStartTime',
                        width: 150,
                        editable: true
                    },
                    {
                        title: '结束时间',
                        align: 'center',
                        key: 'end_date',
                        editable: true,
                        width: 150
                    },
                    {
                        title: '任务',
                        align: 'center',
                        key: 'name',
                        editable: true,
                        width: 150
                    },
//                    {
//                        title: '负责人',
//                        align: 'center',
//                        key: 'farmer',
//                        editable: true,
//                        width: 150
//                    },
                    {
                        title: '水量',
                        align: 'center',
                        key: 'watering',
                        editable: true,
                        width: 150
                    },
                    {
                        title: '肥料N数量',
                        align: 'center',
                        key: 'fertN',
                        editable: true,
                        width: 150
                    },
                    {
                        title: '肥料P数量',
                        align: 'center',
                        key: 'fertP',
                        width: 150,
                        editable: true
                    },
                    {
                        title: '肥料K数量',
                        align: 'center',
                        key: 'fertK',
                        editable: true,
                        width: 150
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'status',
                        editable: true,
                        width: 150
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 230,
                        fixed: 'right',
                        key: 'handle',
//                        handle: ['edit', 'delete'],
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        backgroundColor: "green"
                                    },
                                    on: {
                                        click: () => {
                                        }
                                    },
                                }, "执行"),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                        }
                                    },
                                }, "暂停"),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        transfer: true,
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'on-ok': () => {
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {

                                            }
                                        }
                                    }, "删除")
                                ]),
//                                h('Button', {
//                                    props: {
//                                        type: 'primary',
//                                        size: 'small'
//                                    },
//                                    style: {
//                                        marginRight: '5px'
//                                    },
//                                    on: {
//                                        click: () => {
//                                        }
//                                    },
//                                }, "详情"),
                            ])
                        }
                    }
                ], // 表头
                formInfo: {
                    name: '',
                    intro: '',
                    planedStartTime: '',
                    fertN: '',
                    fertP: '',
                    fertK: '',
                    fertOrganic: '',
                    watering: '',
                    status: '',
                }, // 新增临时任务
                statusDatas: [
                    "未开始",
                    "进行中",
                    "已完成",
                ], // 状态数组
                data: [], // 当前选择计划
                allData: [], //所有计划
                isShowModal: false, // 是否显示model
                id: null, // 计划ID
                allPlanDetail: []
            }
        },
        created() {
            if (this.$route.query.planId) {
                this.id = Number(this.$route.query.planId);
            } else {
                this.id = Number(this.$store.state.planData[0].id);
            }
            this.allData = this.$store.state.planData;
            this.allPlanDetail = this.$store.state.planDetail;
            this.findPlan()
            this.doTask();
        },
        methods: {
            findPlan() {
                let bool = false;
                this.data = [];
                this.task_detail = [];
                if (this.id != '') {
                    this.allPlanDetail.forEach((item) => {
                        if (this.id == item.planId) {
                            this.task_detail.push(item)
//                            if (typeof item.task_detail == "array" && item.task_detail.length > 0) {
//                                item.task_detail.forEach((task_) => {
//                                    this.task_detail.push(task_)
//                                    if (task_.status == "进行中") {
//                                        this.action_detail = task_.action_detail;
//                                        task_.action_detail.forEach((task_child, index) => {
//                                            if (task_child.status == "未完成") {
//                                                this.active_action = index;
//                                                bool = true;
//                                            }
//                                        })
//                                    }
//                                })
//                            }
                        }
                    })
                    this.allData.forEach((items) => {
                        if (this.id == items.id) {
                            this.data = [];
                            this.data.push(items);
                        }
                    })
                } else {
                    this.allPlanDetail.forEach((item) => {
                        this.task_detail.push(item)
                    })
                    this.allData.forEach((items) => {
                        this.data.push(items);
                    })
                }


            },
            setTaskDetail(val) {
                console.log(val == '')
                this.findPlan()
            },
            dateFormat: function (date) {
                if (typeof date != "object") return
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            modalOk: function () {
                let updataData = {
                    planId: this.$store.state.planDetail[this.$store.state.planDetail.length - 1].planId + 1,
                    name: this.formInfo.name,
                    intro: this.formInfo.intro,
                    blockId: this.$store.state.planDetail[this.$store.state.planDetail.length - 1].blockId + 1,
                    fertN: this.formInfo.fertN,
                    fertP: this.formInfo.fertP,
                    fertK: this.formInfo.fertK,
                    fertOrganic: this.formInfo.fertOrganic,
                    watering: this.formInfo.watering,
                    planedStartTime: this.dateFormat(this.formInfo.planedStartTime),
                    status: this.formInfo.status,
                }
                this.task_detail.push(updataData)
            },
            modalCancel: function () {
                this.formInfo.name = "";
                this.formInfo.intro = "";
                this.formInfo.planedStartTime = '';
                this.formInfo.fertN = '';
                this.formInfo.fertP = '';
                this.formInfo.fertK = '';
                this.formInfo.fertOrganic = '';
                this.formInfo.watering = '';
                this.formInfo.status = '';
            },

            doTask: function () {
                if (this.active_action > 5)
                    return;
                this.active_action = this.active_action + 1;
                this.changeSwitch();
                setTimeout(this.doTask,3000)//循环延时
            },

            changeSwitch: function () {
                switch (this.active_action) {
                    case 0:
                        this.switchN = true;
                        this.switchP = true;
                        this.switchK = true;
                        this.switchWater = true;
                        this.switchMain = true;
                        this.showMixFertJug=true;
                        break;
                    case 1:
                        this.switchP = false;
                        this.switchK = false;
                        break;
                    case 2:
                        this.switchN = false;
                        break;
                    case 3:
                        this.switchMixFert = true;
                        break;
                    case 4:
                        this.showMixFertJug=false;
                        this.switchMixFert = false;
                        break;
                    case 5:
                        this.switchWater = false;
                        this.switchMain = false;
                        break;
                }
            }
        },



    }
</script>